import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, combineReducers} from 'redux';
import { Provider, connect } from 'react-redux';
const store = createStore(reducer);
function reducer(state = {count:0}, action) {
	switch(action.type) {
		case "INCREASE":
			return {count: state.count + 1}
		default:
			return state;
	}
}
// UI组件
class Counter extends React.Component {
	render() {
		const {value, onIncreaseClick} = this.props;
		return (
			<div>
				<span>{value}</span>
				<button onClick={onIncreaseClick}>计数</button>
			</div>
		)
	}
}
const mapStateToProps = (state, ownProps) => {
  return {
    value: state.count
  }
}
const mapDispatchToProps = {
  onIncreaseClick: () => {
  	return {
	    type: 'INCREASE'
	}
  }
}
// const mapDispatchToProps = (
//   dispatch,
//   ownProps
// ) => {
//   return {
//     onIncreaseClick: () => {
//       dispatch({
//         type: 'INCREASE'
//       });
//     }
//   };
// }

//容器组件
const CounterContext = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);


ReactDOM.render(
	<Provider store={store}>
		<CounterContext />
	</Provider>,
	document.getElementById('example')
)
